{% if m.acl.user %}
    {% with m.auth2fa.new_totp_image_url as totp %}
        <p>{_ Scan the two-factor authentication QR code with an app such as <a target="_blank" rel="noopener noreferrer" href="https://support.google.com/accounts/answer/1066447">Google Authenticator</a> or <a target="_blank" rel="noopener noreferrer" href="https://duo.com/product/trusted-users/two-factor-authentication/duo-mobile">Duo Mobile</a>. _}<br>
            {_ If you are not able to scan the QR code then copy the code manually to your authentication App. _}
        </p>

        <p style="text-align: center">
            <img src="{{ totp.url }}" style="width: 200px; height: 200px; max-width: 90%">
        </p>
        <p style="text-align: center" class="form-inline">
            <input readonly
                   type="text"
                   value="{{ totp.secret }}"
                   id="{{ #secret }}"
                   style="text-align: center; border: none; margin-right: 10px; width: 35ch;">
            <button class="btn btn-xs btn-default" id="{{ #btn }}">
                <span class="fa fa-copy"></span> {_ Copy _}
            </button>
            {% wire id=#btn
                    action={script
                        script="
                            document.getElementById('" ++ #secret ++ "').select();
                            document.execCommand('copy');
                        "
                    }
                    action={growl text=_"Copied to clipboard"}
            %}
        </p>

        {% wire id=#newcode
                type="submit"
                postback={auth2fa_set
                    id=m.acl.user
                    secret=totp.secret
                    onerror=[
                        {script script="$('#passcode').select();"},
                        {show target=#error}
                    ]
                }
                delegate=`mod_auth2fa`
        %}
        <form action="postback" id="{{ #newcode }}">
            <div class="form-group label-floating">
                <input class="form-control do_autofocus" type="text" id="passcode" name="passcode" value=""
                       required autocomplete="one-time-code" inputmode="numeric" pattern="[0-9]+"
                       placeholder="{_ Type the code generated by your app _}">
                <label class="control-label">{_ Type the code generated by your app _}</label>
                <p class="text-danger" id="{{ #error }}" style="display: none">
                    {_ The two-factor authentication passcode is not correct. Please try again. _}
                </p>
            </div>

            <p style="display: none" id="auth2fa-clock-warning">
                <b>{_ Warning. _}</b> {_ The clock of your computer is more than 20 seconds off. This can cause problems with two-factor authentication. _}
            </p>

            {% javascript %}
                cotonic.broker
                    .call("bridge/origin/model/auth2fa/get/clock_check", { timestamp: Math.floor(Date.now() / 1000) })
                    .then((m) => {
                        if (!m.payload?.result?.is_ok) {
                            document.getElementById('auth2fa-clock-warning').style["display"] = "block";
                        }
                    });
            {% endjavascript %}

            <div class="modal-footer">
                {% button tag="a" class="btn btn-default" text=_"Cancel" action={dialog_close} %}
                <button type="submit" class="btn btn-primary">{_ Set passcode _}</button>
            </div>
        </form>
    {% endwith %}
{% else %}
    <p class="alert alert-info">
        {_ Only the user themselves can set their new two-factor authentication QR code. _}
    </p>

    <div class="modal-footer">
        {% button tag="a" class="btn btn-primary" text=_"Close" action={dialog_close} %}
    </div>
{% endif %}
